<template>
  <div class="bottomNewCorner publicZIndexBottomRightCorner" ref="bottomNewCorner">
    <img
      class="item"
      src="@/assets/image/hdBar/giftIconNew.png"
      v-if="giftSendVisible"
      v-tap="{ methods: openPopupModule, key: giftModuleKey }"
    />
    <img
      class="item"
      src="@/assets/image/hdBar/bapinIconNew.png"
      v-if="giftSendVisible"
      v-tap="{ methods: openPopupModule, key: bapinModuleKey }"
    />
    <img
      class="item"
      src="@/assets/image/hdBar/sendHbIconNew.png"
      v-tap="{ methods: openPopupModule, key: sendHbModuleKey }"
    />
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
import { POPUP_MODULE } from '@/assets/constant/index';

export default {
  name: 'bottomNewCorner',
  computed: {
    ...mapState({
      giftSendVisible: (state) => state.app.giftSendVisible,
    }),
  },
  data() {
    return {
      giftModuleKey: POPUP_MODULE.giftModule.key,
      bapinModuleKey: POPUP_MODULE.bapinModule.key,
      sendHbModuleKey: POPUP_MODULE.sendHbModule.key,
    };
  },
  methods: {
    ...mapMutations({
      togglePopup: 'app/togglePopup',
    }),
    openPopupModule(e) {
      this.togglePopup(e.key);
    },
  },
};
</script>

<style lang="less" scoped>
img {
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

.bottomNewCorner {
  width: 100%;
  position: absolute;
  right: 0;
  bottom: 218px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 24px;

  .item {
    width: 120px;
    height: 126px;
    margin-left: 12px;
  }

  .item:first-child {
    margin-left: 0;
  }
}

@media screen and (max-height: 709px) {
  .bottomNewCorner {
    padding-right: 16px;
    .item {
      transform: scale(0.8);
      margin-left: 2vw;
    }

    .item:first-child {
      margin-left: 0;
    }
  }
}
</style>
